<template>
    <div class="search-suggestion">
       <van-cell 
       icon="search" 
       v-for="(str,index) in suggestions" 
       :key="index"
       @click="$emit('search',str)"
       >
         <div slot="title" v-html="highlight(str)"></div>
       </van-cell>
    </div>
</template>
<script>
import {getSearchSuggestions} from '@/api/search'
// lodash 支持按需加载，有利于打包结果优化
import {debounce} from 'lodash'
export default {
    name:"SearchSuggestion",
    props:{
        searchText:{
            type:String,
            required:true
        }
    },
    data(){
        return{
            suggestions:[],
            
        }
    },
    watch:{
        // searchText(){

        // }等价于下面的写法
        searchText:{
             handler:debounce(async function(){
                const {data}=await getSearchSuggestions(this.searchText)
               this.suggestions=data.data.options
            },200),
            // 当数据发生变化则会执行handler函数
            // async handler(){
            //     const {data}=await getSearchSuggestions(this.searchText)
            //    this.suggestions=data.data.options
            // },
            // 该回调将会在侦听开始之后被立即调用
            immediate:true
        }
    },
    methods:{
        highlight(str){
            // RegExp是正则表达式的构造函数
            // 参数1：字符串
            // 参数2：匹配模式
            // 参数3：正则对象
          return str.replace(new RegExp(this.searchText,'gi'),
          `<span style="color:red">${this.searchText}</span>`)
        }
    }
}
</script>